<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读者的借阅偏好</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="./static/layui/css/layui.css"  media="all">
<!--    <script src="./static/js/Chart.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
    <script type="text/javascript" src="./static/layui/layui.js"></script>

</head>


<center>

    <h1>读者们的借阅偏好</h1>
</center>
<body onload="load()">
<div class="layui-form">
<!--<table class="table" class="layui-table">
    <colgroup>
        <col width="150">
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <th>借阅记录编号</th>
    <th>用户id</th>
    <th>用户名</th>
    <th>图书id</th>
    <th>图书名称</th>
    <th>图书类型</th>
    <th>借书日期</th>
    </thead>
    <tbody id="tb">
    </tbody>
</table>-->
</div>
<button type="button" onclick='raderMap()'>雷达图分析</button>
<canvas id="myChart" width="30" height="30"></canvas>
</body>
</html>

<script>
    function load(){
        //发送ajax请求
        $.ajax({
            url:"./bc/browBookLike.do",//请求地址
            type:"post",//请求方式
            data:{},
            dataType:"json",//返回的数据类型：对象是json，字符串和数组：text
            success:function (data) {//响应成功需要执行的函数
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<tr>"+
                        "<td>"+data[i].browRecoredId+"</td>"+
                        "<td>"+data[i].user.userid+"</td>"+
                        "<td>"+data[i].user.username+"</td>"+
                        "<td>"+data[i].bookId+"</td>"+
                        "<td>"+data[i].book.bookName+"</td>"+
                        "<td>"+data[i].varies.varies+"</td>"+
                        "<td>"+data[i].browDate+"</td>"+
                        "</tr>"
                }
                //把拼接成功地html变量信息显示的id=tb的标签上<input id='dId' type='hidden' value='"+data.list[i].dept.dId+"'>
                $("#tb").html(html)
            },
            error:function (data) {
                //响应失败需要做的事情
                alert("ajax请求失败");
            }
        })
    }
    function raderMap() {
        //用ajax请求数据 并绘制雷达图
        var jsonData=$.ajax({
            url: "./bc/variesCount.do",//请求地址
            type: "post",//请求方式
            data: {},
            dataType: "json",//返回的数据类型：对象是json，字符串和数组：text
        }).done(function(results){
            console.log(results)
                // 将获取到的json数据分别存放到两个数组中
                var labels = results.name, data=results.num;

                // 设置图表的数据
                var tempData = {
                    labels : labels,
                    datasets : [{
                        label: "借阅量",
                        fill: true,
                        lineTension: 0.1,
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderColor: "rgba(75,192,192,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: "rgba(75,192,192,1)",
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(75,192,192,1)",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: data,
                        spanGaps: false,
                    }]
                };

                // 获取所选canvas元素的内容
                var ctx = document.getElementById("myChart");
                //设置图表高度
                ctx.height=9;
                // 初始化一个新的雷达图
                var myLineChart = new Chart(ctx, {
                    type: 'radar',
                    data: tempData,
                    options: {
                        maintainAspectRatio: true,
                    }

            });
        });
    }

</script>